<template>
    <el-dialog v-model="dialogVisible" title="审核中" width="500px" @close="$emit('update:modelValue', false)">
        <div class="main">
            <div class="title">请耐心等待管理员审核，谢谢！</div>
            <img class="qr_code" src="@/assets/imgs/qr_code.png" alt="" />
            <div class="desc">如有更多问题，请联系客服咨询。</div>
        </div>
        <template #footer>
            <div class="dialog_footer">
                <el-button type="primary" @click="dialogVisible = false"> 我知道了 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
    modelValue: { type: Boolean, default: false }
});

const emit = defineEmits(['update:modelValue']);
const dialogVisible = ref(false);
watch(
    () => props.modelValue,
    v => {
        if (v) {
            dialogVisible.value = true;
        }
    }
);
</script>
<style lang="scss" scoped>
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
        margin-bottom: 21px;
        font-size: 14px;
    }
    .qr_code {
        width: 200px;
        height: 200px;
    }
    .desc {
        margin-top: 10px;
        font-size: 12px;
    }
}
.dialog_footer {
    text-align: center;
}
</style>
